import React from 'react'
import {Card, Button, notification, Icon} from 'antd'
import {KimCache} from '../../config/cache.settings'
import './ui.less'


export default class Buttons extends React.Component {
  componentWillMount() {
    this.setState({
      notificationPosition: KimCache.getLocalStorage("notificationConfig", "notificationPosition")
    })
  }

  openNotification = (type, placement) => {
    let count =10;
    if (placement) {
      notification.config({
        placement,
        bottom: 50,
        duration: 10,
      })
    }

    notification[type]({
      key: 'uniqueKey', //todo 可以通过唯一的 key 来更新内容
      message: '发工资了',
      description: (<>上个月考勤22天，迟到12天，实发工资3500<p>倒计时：{count}</p></>),
      // onClose: ()=>clearInterval(timeer),
    });
    

    let timeer = setInterval(() => {
      if(count>0){count--};
      notification[type]({
        key: 'uniqueKey', //todo 可以通过唯一的 key 来更新内容
        message: '发工资了',
        description: (<>上个月考勤22天，迟到12天，实发工资3500<p>倒计时：{count}</p></>),
      });
    }, 1000);

    setTimeout(()=>{
    clearInterval(timeer)    
    },11000)


    setTimeout(() => {
      notification[type]({
        key: 'uniqueKey', //todo 可以通过唯一的 key 来更新内容
        message: 'New Title',
        description: 'New description',
        btn: <Button type="danger" size="small" onClick={() => notification.close('uniqueKey')}> 关闭 </Button>,  //todo 自定义关闭按钮的样式和文字
        onClose: console.log('Notification was closed. Either the close button was clicked or duration time elapsed'),
        style: {width: 500}, //todo 自定义样式
        icon: <Icon type="smile" style={{color: '#108ee9'}}/>, //todo 图标可以被自定义
      });
    }, 12000);

  }

  render() {
    return (
      <div>
        <Card title="通知提醒框" className="card-wrap" style={{marginTop: 10}}>
          <Button type="primary" onClick={() => this.openNotification('success')}>Success</Button>
          <Button type="primary" onClick={() => this.openNotification('info')}>Info</Button>
          <Button type="primary" onClick={() => this.openNotification('warning')}>Warning</Button>
          <Button type="primary" onClick={() => this.openNotification('error')}>Error</Button>
          <Button type="primary" onClick={() => notification.close('uniqueKey')}>Close</Button>
        </Card>


        <Card title="位置" className="card-wrap">
          <Button type="primary"
                  onClick={() => this.openNotification('success', this.state.notificationPosition || "topLeft")}>topLeft</Button>
          <Button type="primary"
                  onClick={() => this.openNotification('info', this.state.notificationPosition || "topRight")}>topRight</Button>
          <Button type="primary"
                  onClick={() => this.openNotification('warning', this.state.notificationPosition || "bottomLeft")}>bottomLeft</Button>
          <Button type="primary"
                  onClick={() => this.openNotification('error', this.state.notificationPosition || "bottomRight")}>bottomRight</Button>
        </Card>

        <Card title="可以通过唯一的 key 来更新内容" className="card-wrap">
          <Button type="danger"
                  onClick={() => this.openNotification('error', this.state.notificationPosition || "topLeft")}>
            打开notification通知框
          </Button>
        </Card>


      </div>
    );
  }
}


// API
// notification.success(config){参数}{参数}
// notification.error(config){参数}
// notification.info(config){参数}
// notification.warning(config){参数}
// notification.warn(config){参数}
// notification.open(config){参数}
// notification.close(key: String){参数}
// notification.destroy(){参数}

//参数如下：
// 参数	                说明	类型	默认值	版本
// btn	               自定义关闭按钮	ReactNode	-
// bottom	           消息从底部弹出时，距离底部的位置，单位像素。	number	24
// className	       自定义 CSS class	string	-
// description	       通知提醒内容，必选	string|ReactNode	-
// duration	           默认 4.5 秒后自动关闭，配置为 null 则不自动关闭	number	4.5
// getContainer	       配置渲染节点的输出位置	() => HTMLNode	() => document.body
// icon	               自定义图标	ReactNode	-
// key	               当前通知唯一标志	string	-
// message	           通知提醒标题，必选	string|ReactNode	-
// onClose	           点击默认关闭按钮时触发的回调函数	Function	-
// onClick	           点击通知时触发的回调函数	Function	-	3.11.0
// placement	       弹出位置，可选 topLeft topRight bottomLeft bottomRight	string	topRight
// style	           自定义内联样式	React.CSSProperties	-
// top	               消息从顶部弹出时，距离顶部的位置，单位像素。	number	24

// 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
// notification.config(options)

// notification.config({
//   placement: 'bottomRight',
//   bottom: 50,
//   duration: 3,
// });

// 参数	                说明	类型	默认值	版本
// bottom	              消息从底部弹出时，距离底部的位置，单位像素。	number	24
// top	                消息从顶部弹出时，距离顶部的位置，单位像素。	number	24
// duration	            默认自动关闭延时，单位秒	number	4.5
// getContainer	        配置渲染节点的输出位置	() => HTMLNode	() => document.body
// placement	          弹出位置，可选 topLeft topRight bottomLeft bottomRight	string	topRight
